<template>
  <XtxCarousel
    :autoplay="autoplay"
    :autoTime="autoTime"
    :banners="banners"
    style="height: 500px"
  ></XtxCarousel>
</template>

<script>
import { ref } from "vue";
import { getBannerData } from "../../api/home";

export default {
  name: "CategoryCarousel",
  setup() {
    // 是否要自动轮播
    let autoplay = ref(true);
    // 自动轮播时间
    let autoTime = ref(3000);
    // 存储轮播图数据
    let banners = ref([]);

    // 获取轮播图数据
    getBannerData(2).then((res) => {
      // console.log(res.result);
      banners.value = res.result;
      // console.log(banners.value);
    });

    return {
      autoplay,
      autoTime,
      banners,
    };
  },
};
</script>

<style scoped></style>
